<template>
  <dys-modal
    :open="open"
    :title="t('组织管理')"
    @cancel="emit('cancel')"
    @ok="handleSubmit"
    :width="400"
  >
    <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-form-item
        :label="t('组织名称')"
        v-bind="validateInfos.organizationName"
      >
        <a-input
          v-model:value="modelRef.organizationName"
          :placeholder="t('请输入组织名称')"
          allow-clear
        ></a-input>
      </a-form-item>
      <a-form-item
        :label="t('组织编码')"
        v-bind="validateInfos.organizationCode"
      >
        <a-input
          v-model:value="modelRef.organizationCode"
          :placeholder="t('请输入组织编码')"
          allow-clear
        ></a-input>
      </a-form-item>
      <a-form-item
        :label="t('组织类型')"
        v-bind="validateInfos.organizationType"
      >
        <select-value-set
          v-model:value="modelRef.organizationType"
          value-set-code="ORGANIZATION_TYPE"
          :placeholder="t('请选择组织类型')"
        ></select-value-set>
      </a-form-item>
      <a-form-item :label="t('组织状态')">
        <a-switch
          v-model:checked="modelRef.organizationStatus"
          checked-value="Y"
          un-checked-value="N"
          :checked-children="t('有效')"
          :un-checked-children="t('无效')"
        ></a-switch>
      </a-form-item>
    </a-form>
  </dys-modal>
</template>
<script lang="ts" setup>
import { pick } from "lodash";
import { useI18n } from "vue-i18n";
import { reactive, watch } from "vue";
import { Form, message } from "ant-design-vue";
import { add, update } from "@/api/system/organization";
import type {
  OrganizationParams,
  QueryResult,
} from "@/api/system/organization/typing";
import type { FormRule } from "@/typing";
import SelectValueSet from "@/components/select-value-set/index.vue";
interface Props {
  /**弹窗 */
  open: boolean;
  /**行数据 */
  model: QueryResult;
}
const props = defineProps<Props>();
const emit = defineEmits(["cancel", "ok"]);
const { t } = useI18n();
const initValue = (): OrganizationParams => ({
  organizationId: null,
  organizationName: null,
  organizationCode: null,
  organizationStatus: "Y",
  organizationType: null,
});
const modelRef = reactive(initValue());
const modelRule = reactive<FormRule<OrganizationParams>>({
  organizationName: [{ required: true, message: () => t("请输入组织名称") }],
  organizationCode: [{ required: true, message: () => t("请输入组织编码") }],
  organizationType: [{ required: true, message: () => t("请选择组织类型") }],
});
const { validate, validateInfos, resetFields } = Form.useForm(
  modelRef,
  modelRule
);
watch([() => props.model, () => props.open], ([model]) => {
  resetFields(pick(model, Object.keys(modelRef)) || initValue());
});
/**提交 */
const handleSubmit = async () => {
  try {
    await validate();
  } catch {
    return message.warning(t("校验失败"));
  }
  const { success } = await (props.model?.organizationId ? update : add)(
    modelRef
  );
  if (success) {
    message.success(
      props.model?.organizationId ? t("修改成功") : t("新增成功")
    );
    emit("ok");
    emit("cancel");
  }
};
</script>
